<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-col :span="23">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item
            :rules="[
              { required: true, message: '不能为空'}
            ]"
            label="标题"
            prop="title">
            <el-input v-model="form.title"/>
          </el-form-item>
          <el-form-item
            :rules="[
              { required: true, message: '不能为空'}
            ]"
            label="内容"
            prop="content">
            <WangEditor :value="form.content" @valueChange="v=>form.content=v"/>
          </el-form-item>
          <el-form-item v-if="operateType === enums.operateEnum.ADD">
            <el-button type="primary" @click="add">保存</el-button>
            <el-button @click="close"> 取消</el-button>
          </el-form-item>
          <el-form-item v-if="operateType === enums.operateEnum.DETAIL">
            <el-button @click="close"> 取消</el-button>
          </el-form-item>
          <el-form-item v-if="operateType === enums.operateEnum.EDIT">
            <el-button type="primary" @click="edit">保存</el-button>
            <el-button @click="close"> 取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import newsApi from '@/api/news/news'
import WangEditor from '@/components/WangEditor'
import operateEnum from '@/enums/operateEnum'

export default {
  name: 'NewsInfo',
  components: {
    WangEditor
  },
  props: {
    // id
    id: {
      type: String,
      required: true
    },
    // 时间戳，判断是否要重新请求详情信息
    t: {
      type: Number,
      required: true
    },
    // 操作类型, 可用  edit, add
    operateType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 表单数据
      form: {
        id: this.id,
        title: '',
        content: ''
      },
      enums: {
        operateEnum
      }
    }
  },
  computed: {},
  mounted() {
    if (this.form.id) {
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      newsApi.detail({ id: this.id }).then(response => {
        if (response.data.code === 200) {
          this.form = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 保存数据
    add() {
      // 验证表单数据
      this.$refs.form.validate((valid) => {
        if (valid) {
          newsApi.add(this.form).then(response => {
            if (response.data.code === 200) {
              this.$message.success('保存成功')
              this.$emit('addComplete')
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }
      })
    },
    // 保存数据
    edit() {
      // 验证表单数据
      this.$refs.form.validate((valid) => {
        if (valid) {
          var postData = {}
          postData.id = this.form.id
          postData.title = this.form.title
          postData.content = this.form.content
          newsApi.edit(postData).then(response => {
            if (response.data.code === 200) {
              this.$message.success('保存成功')
              this.$emit('editComplete')
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }
      })
    },
    close() {
      this.$emit('doClose')
    }
  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
